<template>
  <el-dialog
    class="base-dialog"
    :custom-class="'panna-dialog_medium'"
    :title="title"
    :visible.sync="dialogVisible"
    :append-to-body="true"
    :before-close="handleCloseDialog"
    @closed="closedDialog"
  >
    <p slot="title">{{ title }}</p>

    <div class="main-container">
      <el-collapse v-model="activeName">
        <el-collapse-item :title="customer.basicInformation" name="1">
          <CustomerBase
            ref="CustomerBase"
            :read-only.sync="readOnly"
            :customer-id.sync="customerId"
          />
        </el-collapse-item>
        <el-collapse-item :title="customer.contacts" name="2">
          <CustomerPerson
            ref="CustomerPerson"
            :read-only.sync="readOnly"
            :customer-id.sync="customerId"
          />
        </el-collapse-item>
      </el-collapse>
    </div>
    <span slot="footer" class="base-dialog-footer">
      <el-button :disabled="!submitLoad" type="primary" @click="submitForm">{{
        operateType.save
      }}</el-button>
      <el-button @click="handleCloseDialog">{{ operateType.cancel }}</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { deleteRecord } from "../../../api/SysBusiness/CustomerPerson.js";
import { create, update } from "../../../api/SysBusiness/Customer.js";
import CustomerBase from "./CustomerBase.vue";
import CustomerPerson from "./CustomerPerson.vue";
import _ from "lodash";

export default {
  name: "CustomerMessageDialog",
  components: {
    CustomerBase,
    CustomerPerson,
  },
  props: {
    value: {
      type: Boolean,
      default: false,
    },
    editId: {
      type: [String, Number],
      default: "",
    },
  },
  data() {
    return {
      readOnly: false,
      submitLoad: true,
      title: "",
      customerId: "",
      dialogVisible: false,
      // 页签
      activeName: ["1", "2", "3", "4"],
      tablist: [
        { title: this.$t("Customer.basicInformation"), name: "first" },
        { title: this.$t("Customer.contacts"), name: "second" },
      ],
      total: 0,
    };
  },
  computed: {
    operateType() {
      return this.$t("ModuleSysBusiness.OperateType") || {};
    },
    customer() {
      return this.$t("Customer") || {};
    },
  },
  watch: {
    value: function() {
      this.dialogVisible = this.value;
      this.init();
    },
  },
  created() {},
  methods: {
    init() {
      this.customerId = this.editId;
      this.title = this.editId
        ? this.$t("Customer.editCustomer")
        : this.$t("Customer.addCustomer");
    },
    // 保存
    submitForm: _.throttle(function() {
      if (this.submitLoad) {
        this.submitLoad = false;
        var data = this.$refs.CustomerBase.$refs.baseForm.model;
        var valid = this.$refs["CustomerBase"].validateForm();

        if (valid) {
          if (!this.editId) {
            data.customerPerson = this.$refs.CustomerPerson.personData;
            this.addAPI(data);
          } else {
            this.editAPI(data);
          }
        } else {
          this.submitLoad = true;
        }
      }
    }, 2000),
    editAPI(data) {
      update(data)
        .then((res) => {
          this.submitLoad = true;
          this.handleClose();
        })
        .catch(() => {
          this.submitLoad = true;
        });
    },
    addAPI(data) {
      create(data)
        .then((res) => {
          this.submitLoad = true;
          this.handleClose();
        })
        .catch(() => {
          this.submitLoad = true;
        });
    },
    // 操作成功回调用
    successfulOperation() {
      this.$emit("success");
      this.handleClose();
    },
    // 关闭弹框
    handleClose() {
      this.customerId = "";
      this.$emit("input", false);
      this.$emit("close");
      this.$emit("getList");
      this.$emit("customerClose", this.$refs.CustomerBase.$refs.baseForm.model);
      this.$emit("update:editId", "");
    },
    // 关闭客户弹框没保存
    handleCloseDialog() {
      this.customerId = "";
      this.$emit("input", false);
      this.$emit("close");
      this.$emit("getList");
      this.$emit("customerClose", this.$refs.CustomerBase.$refs.baseForm.model);
      this.$emit("update:editId", "");
      if (!this.editId) {
        if (
          this.$refs.CustomerPerson.personData !== null &&
          this.$refs.CustomerPerson.personData.length !== 0
        ) {
          var idList = [];
          for (
            let i = 0;
            i < this.$refs.CustomerPerson.personData.length;
            i++
          ) {
            idList.push(this.$refs.CustomerPerson.personData[i].id);
          }
          deleteRecord({ id: idList }).then((res) => {});
        }
      }
    },
    // 关闭弹框动画结束
    closedDialog() {
      // 动画结束后在清空表单 防止页面闪烁
      this.$refs.CustomerBase.$refs.baseForm.resetFields();
      this.$refs.CustomerPerson.customerPersonData = [];
      this.$refs.CustomerPerson.personData = [];
      this.$refs.CustomerPerson.total = 0;
      this.$refs.CustomerPerson.filterForm = {
        pageIndex: 1,
        pageSize: 10,
        idList: [],
        sysBusinessCustomerId: 0,
      };
    },
  },
};
</script>

<style  scoped>
.avatar-pane {
  height: 500px;
}

/deep/ .el-collapse-item__header {
  height: 38px;
  line-height: 20px;
  padding: 4px;
  background-color: #f1f8ff;
}

/deep/ .el-collapse-item__content {
  padding-top: 25px;
  padding-bottom: 12.5px;
}
</style>
